<template>
  <div class="search-bar">
    <input type="text" placeholder="输入搜索内容" v-model="searchWord" />
    <button @click="getUserList">查找</button>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data: function () {
    return { searchWord: "" };
  },
  mounted() {},
  methods: {
    getUserList() {
      this.$bus.$emit("getGithubUsers", {
        isWelcome: false,
        isLoading: true,
        errorMessage: "",
        userList: [],
      });
      axios
        .get(`https://api.github.com/search/users?q=${this.searchWord}`)
        .then((response) => {
          console.log(response.data);
          this.$bus.$emit("getGithubUsers", {
            isLoading: false,
            errorMessage: "",
            userList: response.data.items,
          });
        })
        .catch((error) => {
          console.error("请求失败:", error.message);
          this.$bus.$emit("getGithubUsers", {
            isLoading: false,
            errorMessage: error.message,
            userList: [],
          });
        });
    },
  },
};
</script>


<style scoped >
.search-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 32px; /* 与下方卡片区的间距 */
  justify-content: center;
}
.search-bar input {
  flex: 1;
  max-width: 380px;
  padding: 10px 14px;
  border: 1px solid #bbb;
  border-radius: 20px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s;
}
.search-bar input:focus {
  border-color: #0366d6;
}
.search-bar button {
  padding: 10px 24px;
  border: none;
  border-radius: 20px;
  background: #0366d6;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.3s;
}
.search-bar button:hover {
  background: #0256cc;
}
</style>
